<template>
    <div v-show="isShow" class="leftScreen" ref="lSdiv">
        <div class="axiel">
            <span>倾角：</span>
            <span>X: {{ axiel.x }}°</span>
            <span>Y: {{ axiel.z }}°</span>
            <span>Z: {{ axiel.y }}°</span>
        </div>
        <div class="chartZ" ref="Zchartdiv">
            <a-spin size="large" tip="数据同步中..." />
        </div>
        <div class="chartXY" ref="XYchartdiv">
            <a-spin size="large" tip="数据同步中..." />
        </div>
        <!-- <div class="chartXY" ref="AngleDiv">
            <a-spin size="large" tip="数据同步中..." />
        </div> -->
        <div class="axiel">
            <span>倾角速度：</span>
            <span>X: {{ axiel.xv }}du/s</span>
            <span>Y: {{ axiel.yv }}du/s</span>
            <span>Z: {{ axiel.zv }}du/s</span>
        </div>
        <div class="chartXY" ref="SpeedDiv">
            <a-spin size="large" tip="数据同步中..." />
        </div>
        <div class="axiel">
            <span>加速度：</span>
            <span>X: {{ axiel.xa }}m/s/s</span>
            <span>Y: {{ axiel.ya }}m/s/s</span>
            <span>Z: {{ axiel.za }}m/s/s</span>
        </div>
        <div class="chartXY" ref="AccelDiv">
            <a-spin size="large" tip="数据同步中..." />
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import eventbus from '@/until/eventbus';
import * as echarts from 'echarts'
import gsap from 'gsap'

let Zchartdiv = ref(null)
let XYchartdiv = ref(null)
let AngleDiv = ref(null)
let SpeedDiv = ref(null)
let AccelDiv = ref(null)
let lSdiv = ref(null)
let isShow = ref(true)
let axiel = reactive({ x: 0, y: 0, z: 0, xv: 0, yv: 0, zv: 0, xa: 0, ya: 0, za: 0 })

var lengthChartz = 1000
var lengthChartxy = 1000
var lengthCharts = 1000
var lengthCharta = 1000

// z角度存储数组
let ZaxielArr = []
// xy角度存储数组
let XYaxielArr = [
    {
        name: 'X轴',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(235, 104, 39, 1)"
        }
    },
    {
        name: 'Y轴',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(16, 36, 251, 1)"
        }
    },
]

// 倾角存储数组
let AngleArr = [
    {
        name: 'X轴',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(235, 104, 39, 1)"
        }
    },
    {
        name: 'Y轴',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(16, 36, 251, 1)"
        }
    },
    {
        name: 'Z轴',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(35, 222, 107, 1)"
        }
    },
]
// 倾角存储数组
let AngleArr2 = [
    {
        name: 'X轴',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(235, 104, 39, 1)"
        }
    },
    {
        name: 'Y轴',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(16, 36, 251, 1)"
        }
    },
    {
        name: 'Z轴',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(35, 222, 107, 1)"
        }
    },
]
// 倾角加速度存储数组
let AngleArr3 = [
    {
        name: 'X轴',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(235, 104, 39, 1)"
        }
    },
    {
        name: 'Y轴',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(16, 36, 251, 1)"
        }
    },
    {
        name: 'Z轴',
        type: 'line',
        smooth: true,
        emphasis: {
            focus: 'series'
        },
        showSymbol: false,
        stack: 'Total',
        data: [],
        itemStyle: {
            color: "rgba(35, 222, 107, 1)"
        }
    },
]

eventbus.on('qjz',(data)=>{
    lengthChartz = data
})
eventbus.on('qjxy',(data)=>{
    lengthChartxy = data
})
eventbus.on('qjsd',(data)=>{
    lengthCharts = data
})
eventbus.on('qjjsd',(data)=>{
    lengthCharta = data
})

function echartZ(axiel, doms,length) {
    const chart = echarts.init(doms)
    // chart.clear()
    let Options
    for (var i = 0; i < axiel.length; i++) {
        ZaxielArr.push(axiel[i])
    }
    // console.log(ZaxielArr);
    if (ZaxielArr.length < length) {
        Options = {
            title: {
                text: '倾角Z',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    }, restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false,
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: [
                {
                    data: ZaxielArr,
                    type: 'line',
                    itemStyle: {
                        color: "rgba(35, 222, 107, 1)"
                    },
                    name: "Z轴",
                    showSymbol: false,
                    smooth: true
                }
            ]
        }
    } else {
        let t = ZaxielArr.length - length
        for (var i = 0; i < t; i++) {
            ZaxielArr.shift()
        }
        Options = {
            title: {
                text: '倾角Z',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    }, restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: [
                {
                    data: ZaxielArr,
                    type: 'line',
                    name: "Z轴",
                    showSymbol: false,
                    smooth: true,
                    itemStyle: {
                        color: "rgba(35, 222, 107, 1)"
                    }
                }
            ]
        }
    }
    chart.setOption(Options)

}
function echartXY(axiel, doms,length) {
    const chart = echarts.init(doms)
    // var base = new Date()
    let Options = {}
    for (var i = 0; i < axiel[0].length; i++) {
        XYaxielArr[0].data.push(axiel[0][i])
        XYaxielArr[1].data.push(axiel[1][i])
    }
    if (XYaxielArr[0].data.length < length) {
        Options = {
            title: {
                text: '倾角XY',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['X轴', 'Y轴']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    }, restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: XYaxielArr
        }
    } else {
        let t = XYaxielArr[0].data.length - length
        for (var i = 0; i < t; i++) {
            XYaxielArr[0].data.shift()
            XYaxielArr[1].data.shift()
        } Options = {
            title: {
                text: '倾角XY',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['X轴', 'Y轴']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    }, restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: XYaxielArr
        }
    }
    chart.setOption(Options)
}


// 倾角函数
// function echartAngle(axiel, doms){
//     const chart = echarts.init(doms)
//     // var base = new Date()
//     let Options = {}
//     for (var i = 0; i < axiel[0].length; i++) {
//         AngleArr [0].data.push(axiel[0][i])
//         AngleArr [1].data.push(axiel[1][i])
//         AngleArr [2].data.push(axiel[2][i])
//     }
//     if (AngleArr[0].data.length < 1000) {
//         Options = {
//             title: {
//                 text: '倾角',
//                 textStyle: {
//                     fontSize: 25,
//                     fontWeight: "normal"
//                 },
//             },
//             tooltip: {
//                 trigger: 'axis'
//             },
//             legend: {
//                 data: ['X轴', 'Y轴','Z轴']
//             },
//             toolbox: {
//                 show: true,
//                 feature: {
//                     dataZoom: {
//                         yAxisIndex: 'none'
//                     },
//                     saveAsImage: {}
//                 }
//             },
//             grid: {
//                 left: '3%',
//                 right: '4%',
//                 bottom: '3%',
//                 containLabel: true
//             },
//             xAxis: {
//                 axisLabel: {
//                     rotate: 45,
//                 },
//                 type: 'category',
//                 splitLine: {
//                     show: false
//                 },
//                 boundaryGap: false,
//                 axisLine: {
//                     onZero: false
//                 }
//             },
//             yAxis: {
//                 type: 'value',
//                 boundaryGap: [0, '100%'],
//                 splitLine: {
//                     show: false
//                 }
//             },
//             series: AngleArr
//         }
//     } else {
//         let t = AngleArr[0].data.length - 1000
//         for (var i = 0; i < t; i++) {
//             AngleArr[0].data.shift()
//             AngleArr[1].data.shift()
//             AngleArr[2].data.shift()
//         } Options = {
//             title: {
//                 text: '倾角',
//                 textStyle: {
//                     fontSize: 25,
//                     fontWeight: "normal"
//                 },
//             },
//             tooltip: {
//                 trigger: 'axis'
//             },
//             legend: {
//                 data: ['X轴', 'Y轴','Z轴']
//             },
//             toolbox: {
//                 show: true,
//                 feature: {
//                     dataZoom: {
//                         yAxisIndex: 'none'
//                     },
//                     saveAsImage: {}
//                 }
//             },
//             grid: {
//                 left: '3%',
//                 right: '4%',
//                 bottom: '3%',
//                 containLabel: true
//             },
//             xAxis: {
//                 axisLabel: {
//                     rotate: 45,
//                 },
//                 type: 'category',
//                 splitLine: {
//                     show: false
//                 },
//                 boundaryGap: false,
//                 axisLine: {
//                     onZero: false
//                 }
//             },
//             yAxis: {
//                 type: 'value',
//                 boundaryGap: [0, '100%'],
//                 splitLine: {
//                     show: false
//                 }
//             },
//             series: AngleArr
//         }
//     }
//     chart.setOption(Options)
// }

// 倾角速度函数
function echartSpeed(axiel, doms,length) {
    const chart = echarts.init(doms)
    // var base = new Date()
    let Options = {}
    for (var i = 0; i < axiel[0].length; i++) {
        AngleArr2[0].data.push(axiel[0][i])
        AngleArr2[1].data.push(axiel[1][i])
        AngleArr2[2].data.push(axiel[2][i])
    }
    if (AngleArr2[0].data.length < length) {
        Options = {
            title: {
                text: '倾角速度',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['X轴', 'Y轴', 'Z轴']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    }, restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: AngleArr2
        }
    } else {
        let t = AngleArr2[0].data.length - length
        for (var i = 0; i < t; i++) {
            AngleArr2[0].data.shift()
            AngleArr2[1].data.shift()
            AngleArr2[2].data.shift()
        } Options = {
            title: {
                text: '倾角速度',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['X轴', 'Y轴', 'Z轴']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    }, restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: AngleArr2
        }
    }
    chart.setOption(Options)
}
// 倾角加速度函数
function echartAccel(axiel, doms,length) {
    const chart = echarts.init(doms)
    // var base = new Date()
    let Options = {}
    for (var i = 0; i < axiel[0].length; i++) {
        AngleArr3[0].data.push(axiel[0][i])
        AngleArr3[1].data.push(axiel[1][i])
        AngleArr3[2].data.push(axiel[2][i])
    }
    if (AngleArr3[0].data.length < length) {
        Options = {
            title: {
                text: '倾角加速度',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['X轴', 'Y轴', 'Z轴']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    }, restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: AngleArr3
        }
    } else {
        let t = AngleArr3[0].data.length - length
        for (var i = 0; i < t; i++) {
            AngleArr3[0].data.shift()
            AngleArr3[1].data.shift()
            AngleArr3[2].data.shift()
        } Options = {
            title: {
                text: '倾角加速度',
                textStyle: {
                    fontSize: 25,
                    fontWeight: "normal"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['X轴', 'Y轴', 'Z轴']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    }, restore: {},
                    saveAsImage: {},
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                axisLabel: {
                    rotate: 45,
                },
                type: 'category',
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,

                    handleSize: 15,
                    height: 15,
                    bottom: '1%'
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 12,
                    height: '70%',
                    handleSize: 12,
                    showDataShadow: false,
                    left: '97%',
                    top: '13%'
                }],
            series: AngleArr3
        }
    }
    chart.setOption(Options)
}
// CenterButton.vue line:11
eventbus.on('toggle', () => {
    isShow.value = !isShow.value
})

eventbus.on('NAxiel', (data) => {
    // console.log(data);
    // let axiel = [data.xRarr, data.yRarr,data.zRarr]
    let axiel = [data.xRarr, data.yRarr]
    let axiel1 = [data.xVarr, data.yVarr, data.zVarr]
    let axiel2 = [data.xAarr, data.yAarr, data.zAarr]
    echartZ(data.zRarr, Zchartdiv.value,lengthChartz)
    // console.log(lengthChart);
    echartXY(axiel, XYchartdiv.value,lengthChartxy)
    // echartAngle(axiel, AngleDiv.value)
    echartSpeed(axiel1, SpeedDiv.value,lengthCharts)
    echartAccel(axiel2, AccelDiv.value,lengthCharta)
})

eventbus.on('rotation', (Aarr) => {
    axiel.x = Aarr[0]
    axiel.y = Aarr[1]
    axiel.z = Aarr[2]
    axiel.xv = Aarr[3]
    axiel.yv = Aarr[4]
    axiel.zv = Aarr[5]
    axiel.xa = Aarr[6]
    axiel.ya = Aarr[7]
    axiel.za = Aarr[8]
})
let lsStyle
onMounted(() => {
    lsStyle = lSdiv.value.style
    // console.log(lsStyle);
})
nextTick(() => {
    // console.log(lsStyle.width);
    // gsap.to(lsStyle, { width: "350px", duration: 3 })
})
</script>
<style>
.leftScreen {
    /* pointer-events: none; */
    width: 30vw;
    height: 100vh;
    background-color: rgba(226, 243, 250, 0.192);
    z-index: 1000;
    position: fixed;
    left: 0;
    bottom: 0;
    box-shadow: 1px -1px 2px 1px rgb(0 0 0 / 20%);
}

.axiel {
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    border-bottom: solid 2px rgba(151, 148, 148, 0.425);
    color: rgb(21 66 167);
}

.chartZ {
    width: 100%;
    height: 200px;
    text-align: center;
    line-height: 200px;
    border-bottom: 2px solid rgba(151, 148, 148, 0.425);
    pointer-events: auto;
}

.chartXY {
    width: 100%;
    height: 200px;
    /* margin-bottom: 20px; */
    text-align: center;
    line-height: 200px;
    border-bottom: 2px solid rgba(151, 148, 148, 0.425);
    pointer-events: auto;
}
</style>
